import { FC } from "react"
import { useSelector } from "react-redux"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
// import { useSelector } from "react-redux"
import { useLocale } from "@/locales"
import { AppState } from "@/stores"
// import { Select } from "antd"

export type VenueTypeField = {
	venueTypeCode: string
}
export const venueMap = new Map([
	["zr", "label.realVenue"],
	["ty", "label.sportVenue"]
])
const VenueType: FC<{ options?: string[]; labelId?: string; allowClear?: boolean }> = props => {
	const { newFormat } = useLocale()
	const { allDictLists } = useSelector((state: AppState) => state.config)
	let options = allDictLists["bwVenueTypeList"].map((item: { label: string; value: any }) => {
		return {
			label: newFormat(item.label),
			value: item.value
		}
	})
	if (props.options) {
		options = options.filter((item: { label: string; value: any }) => {
			return (props.options as string[]).includes(item.value)
		})
	}
	// console.log(newFormat({ id: "label.demoList.0" }))
	// const DynamicComponent = lazy(() => dynamicComponent(props.name))
	return (
		<SFormItem name="venueTypeCode" label={newFormat({ id: props.labelId ?? `label.venueName` })}>
			{/* <Select style={{ width: "300px" }} options={options} /> */}
			<StyleSelect w={180} options={options} placeholder={newFormat({ id: "label.select_all" })} allowClear={props.allowClear} />
		</SFormItem>
	)
}

export default VenueType
